<script setup lang="ts">
import { computed } from "vue";
import { Field } from "vant";
import type { OrderForm } from "../types";

const props = withDefaults(
	defineProps<{
		form: OrderForm;
	}>(),
	{}
);

const emits = defineEmits<{
	(e: "company-click"): () => void;
	(e: "project-click"): () => void;
	(e: "type-click"): () => void;
	(e: "pcb-click"): () => void;
}>();

const finalForm = computed(() => props.form);

const companyClick = () => {
	emits("company-click");
};

const projectClick = () => {
	if (!finalForm.value.companyCode) return;
	emits("project-click");
};

const typeClick = () => {
	emits("type-click");
};

const pcbClick = () => {
	emits("pcb-click");
};

const getRules = (msg: string): any => {
	return [{ required: true, message: "请选择" + msg, trigger: "onChange" }];
};
</script>

<template>
	<div class="pur-basic">
		<Field
			v-model="finalForm.companyName"
			:rules="getRules('公司')"
			label-align="top"
			label="公司"
			placeholder="请选择"
			is-link
			readonly
			required
			@click="companyClick"
		/>
		<Field
			v-model="finalForm.projectName"
			:rules="getRules('项目名称')"
			label-align="top"
			readonly
			is-link
			:label="'项目名称' + (finalForm.companyName ? '(' + finalForm.companyName + ')' : '')"
			placeholder="请选择"
			@click="projectClick"
			required
		/>
		<Field
			v-model="finalForm.projecterName"
			:rules="getRules('项目负责人')"
			label-align="top"
			label="项目负责人"
			placeholder="请输入"
			required
		/>
		<Field
			v-model="finalForm.applyTypeText"
			:rules="getRules('申请类型')"
			label-align="top"
			readonly
			is-link
			label="申请类型"
			placeholder="请选择"
			@click="typeClick"
			required
		/>
		<Field
			v-model="finalForm.pcbFlagText"
			:rules="getRules('')"
			label-align="top"
			readonly
			is-link
			label="是否电控研发部PCB试制"
			placeholder="请选择"
			@click="pcbClick"
			required
		/>
	</div>
</template>

<style lang="less" scoped></style>
